<template>
    <Checkout @close="showCheckout = false" :is-show="showCheckout"></Checkout>
    <div class="cart-bar">
        <div class="cart-bag">
            <img :src="cartBag" alt="购物袋" />
            <span v-show="totalCount > 0" class="total-count">{{ totalCount }}</span>
        </div>
        <div class="total-amount">
            <p v-show="totalCount <= 0" class="no-goods">未选购商品</p>
            <p @click="showDetails = true" v-show="totalCount > 0" class="has-goods">{{ amount }}</p>
        </div>
        <button class="checkout-btn" @click="showCheckout = totalCount > 0">去结算
        </button>
    </div>
    <CartDetails :is-show="showDetails" @hide="showDetails = false"></CartDetails>
</template>
<script setup lang="js">
import { ref } from "vue";
import cartBag from "@/assets/bag.png"
import { useMealsStore } from "@/stores/mealsStore";
import { storeToRefs } from "pinia";
import CartDetails from "./CartDetails.vue";
import Checkout from "../Checkout/Checkout.vue";
const { totalCount, amount } = storeToRefs(useMealsStore())
const showDetails = ref(false)
const showCheckout = ref(false)
</script>
<style lang="css" scoped>
.cart-bar {
    font-size: 30rem;
    position: fixed;
    background-color: rgb(58, 58, 58);
    bottom: 40rem;
    width: 710rem;
    height: 100rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 60rem;
    z-index: 9999;
}

.cart-bag {
    position: absolute;
    width: 100rem;
    bottom: -10rem;
}

.total-count {
    width: 40rem;
    height: 40rem;
    text-align: center;
    line-height: 40rem;
    position: absolute;
    background-color: red;
    border-radius: 50%;
    right: -20rem;
    color: #fff;
    font-weight: bold;
}

.total-amount {
    margin-left: 140rem;
    line-height: 100rem;
}

.no-goods,
.has-goods {
    color: rgb(148, 148, 148);
    font-size: 36rem;
    font-weight: bold;
}

.has-goods {
    color: #fff;
}

.has-goods::before {
    content: "￥";
    font-size: 26rem;
}

.checkout-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 200rem;
    height: 100%;
    border-radius: 60rem;
    border: none;
    background-color: rgb(248, 188, 0);
    font-size: 36rem;
}
</style>